<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { getBuy, ailpayM } from "../api/api";
import { useRoute } from "vue-router";
import { showFailToast } from 'vant';
import Buypc from "./pc/Buypc.vue";
const route = useRoute()
const title = ref()
const data = ref()
onMounted(() => {
    title.value = route.query.title
    getBuyData()
})
//获取数据
const getBuyData = async () => {
    const res = await getBuy()
    data.value = res.data.data
}
//创建购买
const getId = async (m: string) => {
    const res = await ailpayM({ money: m, data: localStorage.getItem('mail') as string })
    if(res.data.code === '404') return showFailToast('请先进行登录');
    window.location.href = res.data.data
}
const onClickLeft = () => history.back();
</script>

<template>
    <div class="m">
        <van-nav-bar fixed placeholder :title left-text="返回" color="black" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
        <div class="conent">
            <van-divider content-position="left">购买次数</van-divider>
            <van-card v-for="i in data" :key="i._id" num="1" :price="i.money" :desc="i.integral + '积分'" title="沙雕动画下载积分" thumb="http://101.32.169.227:3000/Material/1.png">
                <template #tags>
                    <van-tag plain type="primary">素材</van-tag>
                </template>
                <template #footer>
                    <van-button type="danger" size="mini" @click="getId(i.money)">购买</van-button>
                </template>
            </van-card>
        </div>
    </div>
    <div class="pc">
        <Buypc></Buypc>
    </div>
</template>

<style scoped>
.conent {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    min-height: calc(100vh - 100px);
}
.h{
    height: 20px
}
img{
    width: 50px;
    height: 100px
}
@media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>